<template>
    <view class="content">
		<!-- 余额信息 -->
		<view class="banlance-info">
			<view class="left">
				<text class="title">可提现金额(元)</text>
				<text class="banlance">{{ userInfo.balance || 0 }}</text>
			</view>
			<view class="btn record" @tap="toRecord()">提现明细</view>
		</view>
		
		<!-- 提现信息 -->
		<view class="withdrawal-info">
			<view class="header">
				<text class="text">提现到</text>
				<view class="right">
					微信钱包
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="bottom">
				<text class="title">提现金额(元)</text>
				<view class="withdrawal-input">
					<u-input v-model="value" type="number" placeholder="¥最小不低于1元" :clearable="false" @focus="onFocus" @blur="onBlur"/>
					<view class="withdrawal-all" @tap="withdrawalAll()">全部提取</view>
				</view>
			</view>
		</view>
		
		<view class="withdrawal-desc">
			<view class="text">发起申请后联系客服提现</view>
			<view class="text">
				客服微信号：{{ wechatInfo.wx }}
				<view class="copy-btn" @tap="onCopy">
					<view class="copy-inner"></view>
				</view>
			</view>
		</view>
		
		<!--底部按钮组-->
		<view class="footer-bar">
			<button class="btn withdrawal" @tap="onWithdrawal()" :class="[{ use : parseFloat(value) >= 1 }]">提现</button>
		</view>
		
		<!-- 绑定手机号确认弹窗 -->
		<u-popup class="phone-popup" v-model="phoneVisible" mode="center">
			<view class="inner">
				<image class="image" mode="widthFix" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201116/52956cc0-27f4-11eb-8d83-3746cbc74b61.png"></image>
				<view class="front">
					<view class="content">
						<view class="title">致用户</view>
						<text class="text">
							为了我们能够为您更好的服务，同时也保证您的资金安全，我们必须在您提现的时候获取的手机号以方便我们进行身份验证。
						</text>
						<text class="text">谢谢您的理解！</text>
					</view>
					<button class="btn withdrawal" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">我知道了</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
    export default {
        name: "balance",
		data() {
			return {
				value: '0.00',
				code: null,
				phoneVisible: false,
				btnLock: false,
				wechatInfo: {}
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
        	let that = this;
			this.getWechat();
			uni.login({
				provider: 'weixin',
				success(res) {
					that.code = res.code;
				}
			});
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
			
			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_tixian');
			// #endif
		},
		methods: {
			getWechat() {
				this.$service.common.base.settings().then(res => {
					this.wechatInfo = res.wechat;
				})
			},
			// 去提现明细
			toRecord() {
				uni.navigateTo({
					url: '/pages/member/record?type=1'
				})
			},
			// 金额校验
			onBlur(e) {
				if (!e) {
					this.value = 0;
				} else if (parseFloat(e) > parseFloat(this.userInfo.balance)) {
					this.value = this.userInfo.balance;
				}
				
				setTimeout(() => {
					if (!this.value) {
						this.value = '0.00';
					}
				});
				
				this.value = parseFloat(this.value).toFixed(2);
			},
			onClear(e){
				setTimeout(() => {
					if (!this.value) {
						this.value = '0.00';
					}
				})
			},
			// 全部提现
			withdrawalAll() {
				this.value = this.userInfo.balance;
			},
			// 申请提现
			onWithdrawal() {
				// #ifdef MP-WEIXIN
				uni.reportAnalytics('click_tixian_botton_balance');
				// #endif
				
				if (parseFloat(this.value) >= 1) {
					if (!this.userInfo.phone) {
						this.phoneVisible = true;
					} else {
						if (!this.btnLock) {
							this.btnLock = true;
							this.$service.order.withdraw.add({
								payWay: 1 , // 微信提现
								amount: this.value
							}).then(res => {
								uni.showToast({
									title: '发起提现成功，请联系客服提现',
									icon: 'none'
								});
								this.$store.dispatch('getUserInfo');
								this.btnLock = false;
								
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/member/record?type=1'
									})
								}, 2000)
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
								this.btnLock = false;
							});
						}
					}
				} else {
					uni.showToast({
						title: '提现金额最小不低于1元',
						icon: 'none'
					});
					return false;
				}
			},
			onCopy() {
				uni.setClipboardData({
				    data: this.wechatInfo.wx,
				    success: function () {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
				    }
				});
			},
			// 获取微信手机号
			getPhoneNumber(e) {
				this.phoneVisible = false;
				this.$service.common.sign.getPhoneNumber({
					code: this.code,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}).then(async () => {
					await this.$store.dispatch('getUserInfo');
					this.onWithdrawal();
				});
			},
			// 聚焦清空
			onFocus() {
				if (this.value === '0.00') {
					this.value = '';
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
.content {
	.banlance-info {
		background: $main-color;
		height: 230rpx;
		padding-top: 54rpx;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		@include flexBox(space-between, flex-start);
		.left {
			margin-left: 40rpx;
			color: #221D2C;
			@include flexBox(flex-start, flex-start, column);
			.title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.banlance {
				font-size: 60rpx;
			}
		}
		.btn {
			padding: 12rpx 28rpx;
			border-radius: 50rpx 0 0 50rpx;
			&.record {
				background: #333333;
				color: $main-color;
			}
		}
	}
	.withdrawal-info {
		width: 710rpx;
		margin: 20rpx auto;
		padding: 0 26rpx;
		background: #fff;
		border-radius: 16rpx;
		.header {
			padding: 30rpx 0;
			font-size: 28rpx;
			color: #221D2C;
			font-weight: 600;
			border-bottom: 2rpx solid #F5F5F5;
			@include flexBox(space-between, center);
			.right {
				@include flexBox(center, center);
			}
		}
		.bottom {
			padding: 30rpx 0 50rpx;
			font-size: 28rpx;
			.title {
				color: #221D2C;
				font-weight: 600;
			}
			.withdrawal-input {
				margin-top: 20rpx;
				border-bottom: 2rpx solid #CCCCCC;
				@include flexBox(space-between, center);
				/deep/.u-input {
					.uni-input-placeholder {
						font-size: 36rpx;
						color: #C1C1C1;
					}
					.uni-input-input {
						font-size: 36rpx;
					}
				}
				.withdrawal-all {
					color: #4D93FF;
					margin-left: 20rpx;
				}
			}
		}
	}
	.withdrawal-desc {
		padding: 0 60rpx;
		font-weight: 600;
		@include flexBox(flex-start, flex-start, column);
		.copy-btn {
			margin-left: 20rpx;
			margin-top: 4rpx;
			background: #F6F7FA;
			.copy-inner {
				background: #F6F7FA;
			}
		}
		.text {
			@include flexBox(flex-start, center);
		}
	}
	.footer-bar {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		background: #fff;
		padding: 10rpx 24rpx;
		@include flexBox(center);
		.btn {
			width: 100%;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: 600;
			&::after {
				border: none;
			}
			&.withdrawal {
				color: #333333;
				background: #ccc;
				transition: 0.3s;
				&.use {
					background: $main-color;
				}
			}
		}
	}
	/deep/.phone-popup {
		.u-mode-center-box {
			background: none;
		}
		.inner {
			width: 520rpx;
			height: 632rpx;
			background: #fff;
			border-radius: 16rpx;
			position: relative;
			.image {
				width: 100%;
				position: absolute;
			}
			.front {
				position: relative;
				padding: 200rpx 20rpx 0;
				.content {
					width: 480rpx;
					height: 308rpx;
					border-radius: 16rpx;
					background: #FFFFFF;
					padding: 0 26rpx;
					box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
					@include flexBox(flex-start, flex-start, column);
					.title {
						text-align: center;
						width: 100%;
						font-size: 30rpx;
						font-weight: 600;
						padding: 24rpx 0 14rpx;
					}
					.text {
						text-indent: 2em;
						margin-bottom: 10rpx;
					}
				}
				.btn {
					width: 100%;
					border-radius: 50rpx;
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 28rpx;
					line-height: 72rpx;
					&::after {
						border: none;
					}
					&.withdrawal {
						background: $main-color;
						color: #333333;
					}
				}
			}
		}
	}
}
</style>